<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>元素样式编辑器</title>
		<script src="js/vue.js"></script>
	</head>

	<body>
		<div id="app">
			<label>宽度：</label><input v-model="w" type="number"><br>
			<label>高度：</label><input v-model="h" type="number"><br>
			<label>背景：</label><input v-model="bg" type="color"><br>
			<label>边框：</label>
			宽度：<input v-model="border[0]" type="number">
			类型：<select v-model="border[1]">
				<option value="solid">实线</option>
				<option value="dashed">虚线</option>
				<option value="dotted">点线</option>
				<option value="double">双实线</option>
			</select>
			颜色<input v-model="border[2]" type="color"><br />
			<label>圆角</label>
			<input v-model="borderRadius[0]" type="range" min="0" max="50">
			<input v-model="borderRadius[1]" type="range" min="0" max="50">
			<input v-model="borderRadius[2]" type="range" min="0" max="50">
			<input v-model="borderRadius[3]" type="range" min="0" max="50">
			<div :style="{
            width: w + 'px',
            height: h + 'px',
            background: bg,
            border: border[0] + 'px ' + border[1] + ' ' + border[2],
            borderRadius: borderRadius[0] + 'px ' + borderRadius[1] + 'px ' + borderRadius[2] + 'px ' + borderRadius[3] + 'px'
        }">
			</div>
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						w: 300,
						h: 300,
						bg: '#ffff00',
						border: [0, 'solid', '#000000'],
						borderRadius: [0, 0, 0, 0]
					};
				}
			}).mount('#app');
		</script>
	</body>

</html>